<template>
  <el-form
    hide-required-asterisk
    class="form"
    size="mini"
    ref="form"
    :model="form"
    :rules="rules"
    :show-message="false"
    label-width="80px">
    <el-form-item v-if="form.parentId" label="父目录">
      <el-input v-model="form.parentName" disabled></el-input>
    </el-form-item>
    <el-form-item label="名称" prop="name">
      <el-input v-model="form.name"></el-input>
    </el-form-item>
    <el-form-item label="描述">
      <el-input
        type="textarea"
        v-model="form.comment"
        maxlength="150"
        :show-word-limit="false"></el-input>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  props: {
    form: {
      type: Object,
      required: true
    }
  },
  data() {
    const valiName = (rule, value, callback) => {
      const reg = /^[a-zA-Z0-9\u4e00-\u9fa5]{1,20}$/
      if (reg.test(value)) {
        callback();
      } else {
        callback(new Error('只支持中文、字母、数字组合的20位字符组合'));
      }
    }

    return {
      rules: {
        name: [
          { required: true, message: '名称不能为空' },
          { validator: valiName }
        ]
      }
    }
  }
}
</script>

<style scoped>
.form {
  width:auto;
  margin: 15px 15px 0 15px;
}
</style>